<template>
  <div>
    <div class="login">
      <div class="loginForm">
        <el-input v-model="loginForm.username" placeholder="用户名/手机号/邮箱"></el-input>
      </div>
      <div class="loginForm">
        <el-input v-model="loginForm.password" placeholder="密码" show-password></el-input>
      </div>
      <div class="loginForm">
        <div class="verifyCode">
          <el-input v-model="loginForm.verifyCode" placeholder="验证码"></el-input>
        </div>
        <div class="image">
          <div class="block">
            <el-image :src="verifyCodeSrc" @click="getVerifyCode">
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
          </div>
        </div>
        <div style="clear:both"></div>
      </div>
      <div class="btn">
        <el-button type="primary" @click="login">登录</el-button>
        <el-button>注册</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapMutations} from 'vuex';

  export default {
    name: 'login',
    data() {
      return {
        loginForm: {
          username: '',
          password: '',
          verifyCode: ''
        },
        verifyCodeSrc: ''
      };
    },
    mounted() {
      this.getVerifyCode();
    },
    methods: {
      ...mapMutations(['changeLogin']),
      login() {
        let _this = this;
        if (this.loginForm.username === '' || this.loginForm.password === '') {
          _this.$message({
            message: '账号或密码不能为空',
            type: 'warning'
          });
        } else {
          this.axios.post('/user/syslogin', this.loginForm).then(res => {
            if (res && res.data.code == 200) {
              const user = {}
              user.token = res.data.data.token
              user.userName = res.data.data.userName
              user.userId = res.data.data.userId

              // 将用户token保存到vuex中
              this.$store.commit('changeLogin', user)
              //增加Cookies中键值对
              this.setCookies(user)

              _this.$router.push('/home');
            } else {
              _this.$message({
                message: res.data.message ? res.data.message : '登录失败',
                type: 'warning'
              });
            }
          }).catch(error => {
            _this.$message({
              message: error.message ? error.message : '登录失败',
              type: 'warning'
            });
          });
        }
      },
      //增加Cookies中键值对
      setCookies(user) {
        // 1天后过期
        this.$cookies.config('1d')
        // 不写过期时间，默认为1天过期
        this.$cookies.set("userId", user.userId)
        this.$cookies.set("userName", user.userName)
        this.$cookies.set("token", user.token)
      },
      //获取验证码
      getVerifyCode() {
        this.verifyCodeSrc = process.env.URL + "/user/syslogin/verifyCode?t=" + new Date().getTime()
      }
    }
  };
</script>

<style scoped>
  .login {
    width: 400px;
    margin: 0 auto;
  }

  .login .loginForm, .btn {
    margin-top: 10px;
  }

  .login .loginForm .verifyCode {
    width: 300px;
    float: left;
  }

  .login .loginForm .image {
    width: 100px;
    float: left;
  }

</style>
